<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Try xstyle</title>
	<style>
	/* Using XStyle to create a page to try out XStyle. */
	converter = module('xstyle/test/converter');
	data = converter/parsed;
	
	body {
		converter: true;
		font-family: "Segoe UI", "Segoe WP", "Helvetica Neue", Roboto, sans-serif;	
		=>
			h1 'xstyle',
			p 'Try it out',
			div.column {=>
				h2 'data:',
				textarea[data-continuous].live-source(converter/data),
				span.error(converter/data/error);
			},
			div.column {=>
				h2 'presentation:',
				textarea[data-continuous].live-source(converter/ui),
				span.error(converter/ui/error); 
			},
			div.column {=>
				h2 'result: #target',
				div#target; /*[title='The result of the data rendered according to the presentation CSS'];*/ 
			},
			p 'more information about XStyle' {
				clear: both;
			}
			
	}

	h1, h2 {
		opacity: 0.8;
		font-weight: 100;
		font-family: "Segoe UI Light", "Helvetica Neue", RobotoLight, "Segoe UI", "Segoe WP", sans-serif;
		color: #08E;
	}
	h1 {
		font-size: 56px;
		letter-spacing: 2px;
	}
	.live-source {
	}
	.column {
		float: left;
		width: 300px;
	}
	.live-source {
		width: 280px;
		height: 200px;
	};
	</style>
	
	<script src="../../dojo/dojo.js" data-dojo-config="async:true"></script>
	<script>
		require(['xstyle/main'], function(layout){
		});
	
	</script>
	
	</head>
	<body>
	</body>
</html>
